<template>
  <view class="staff-list-page">
    <!-- 页面标题 -->
    <view class="page-title">员工管理</view>

    <!-- 搜索与筛选区 -->
    <view class="search-filter">
      <view class="search-box">
        <uni-icons type="search" size="24" class="search-icon"></uni-icons>
        <input 
          v-model="searchKey" 
          placeholder="搜索姓名/ID/身份证号" 
          class="search-input"
          @confirm="handleSearch"
        ></input>
      </view>
      
      <view class="filter-options">
        <picker 
          @change="onGenderChange" 
          :value="genderIndex" 
          :range="genderOptions"
          class="gender-picker"
        >
          <view class="picker-text">{{ genderOptions[genderIndex] }}</view>
        </picker>
        
        <button @click="resetFilter" class="reset-btn">重置</button>
        <button @click="addStaff" class="add-btn">+ 新增员工</button>
      </view>
    </view>

    <!-- 员工列表 -->
    <view class="staff-list">
      <!-- 列表表头 -->
      <view class="list-header">
        <view class="header-item" :style="{ width: '8%' }">用户ID</view>
        <view class="header-item" :style="{ width: '10%' }">照片</view>
        <view class="header-item" :style="{ width: '10%' }">姓名</view>
        <view class="header-item" :style="{ width: '8%' }">性别</view>
        <view class="header-item" :style="{ width: '18%' }">身份证号</view>
        <view class="header-item" :style="{ width: '12%' }">入职日期</view>
        <view class="header-item" :style="{ width: '14%' }">合同文件</view>
        <view class="header-item" :style="{ width: '12%' }">身份证照片</view>
        <view class="header-item" :style="{ width: '8%' }">操作</view>
      </view>

      <!-- 列表内容 -->
      <view 
        v-for="(staff, index) in paginatedStaffList" 
        :key="staff.id" 
        class="staff-item"
        @click="viewStaffDetail(staff)"
      >
        <view class="item-content" :style="{ width: '8%' }">{{ staff.id }}</view>
        <view class="item-content" :style="{ width: '10%' }">
          <image 
            :src="staff.photoUrl" 
            mode="widthFix" 
            class="staff-photo"
            @click.stop="previewImage(staff.photoUrl)"
          ></image>
        </view>
        <view class="item-content" :style="{ width: '10%' }">{{ staff.name }}</view>
        <view class="item-content" :style="{ width: '8%' }">
          <view class="gender-tag" :class="staff.gender === '男' ? 'male' : 'female'">
            {{ staff.gender }}
          </view>
        </view>
        <view class="item-content" :style="{ width: '18%' }">
          {{ maskIdCard(staff.idCard) }}
        </view>
        <view class="item-content" :style="{ width: '12%' }">{{ staff.entryDate }}</view>
        <view class="item-content" :style="{ width: '14%' }">
          <button 
            class="file-btn" 
            @click.stop="downloadFile(staff.contractFile)"
            :disabled="!staff.contractFile"
          >
            {{ staff.contractFile ? '查看合同' : '未上传' }}
          </button>
        </view>
        <view class="item-content" :style="{ width: '12%' }">
          <button 
            class="idcard-btn" 
            @click.stop="previewIdCard(staff.idCardPhotos)"
            :disabled="!staff.idCardPhotos || staff.idCardPhotos.length === 0"
          >
            查看证件
          </button>
        </view>
        <view class="item-content" :style="{ width: '8%' }">
          <view class="operate-btns">
            <uni-icons 
              type="edit" 
              size="24" 
              class="edit-icon"
              @click.stop="editStaff(staff)"
            ></uni-icons>
            <uni-icons 
              type="trash" 
              size="24" 
              class="delete-icon"
              @click.stop="deleteStaff(staff.id, index)"
            ></uni-icons>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="filteredStaffList.length === 0" class="empty-state">
        <uni-icons type="person" size="60" color="#ccc"></uni-icons>
        <view class="empty-text">暂无员工数据</view>
        <button @click="addStaff" class="empty-add-btn">+ 新增员工</button>
      </view>
    </view>

    <!-- 分页控件 -->
    <view v-if="filteredStaffList.length > 0" class="pagination">
      <button 
        @click="changePage(currentPage - 1)" 
        :disabled="currentPage === 1"
        class="page-btn"
      >
        上一页
      </button>
      <view class="page-info">
        第 {{ currentPage }} / {{ totalPages }} 页
      </view>
      <button 
        @click="changePage(currentPage + 1)" 
        :disabled="currentPage === totalPages"
        class="page-btn"
      >
        下一页
      </button>
    </view>

    <!-- 确认删除弹窗 -->
    <uni-popup 
      v-model="showDeleteConfirm" 
      mode="center"
      :mask-click="false"
    >
      <view class="confirm-popup">
        <view class="popup-title">确认删除</view>
        <view class="popup-content">
          确定要删除该员工信息吗？此操作不可撤销。
        </view>
        <view class="popup-btns">
          <button @click="showDeleteConfirm = false" class="cancel-btn">取消</button>
          <button @click="confirmDelete" class="confirm-btn">确认删除</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';

export default {
  components: {
    uniIcons,
    uniPopup
  },
  data() {
    return {
      // 搜索与筛选条件
      searchKey: '',
      genderOptions: ['全部性别', '男', '女'],
      genderIndex: 0,

      // 员工列表数据
      staffList: [
        {
          id: 'EMP001',
          name: '张三',
          gender: '男',
          idCard: '110101199001011234',
          photoUrl: 'https://picsum.photos/seed/emp1/100/100',
          entryDate: '2020-03-15',
          contractFile: '/files/contracts/emp001.pdf',
          idCardPhotos: [
            'https://picsum.photos/seed/id1/400/200',
            'https://picsum.photos/seed/id2/400/200'
          ]
        },
        {
          id: 'EMP002',
          name: '李四',
          gender: '女',
          idCard: '310101199205125678',
          photoUrl: 'https://picsum.photos/seed/emp2/100/100',
          entryDate: '2021-07-22',
          contractFile: '/files/contracts/emp002.pdf',
          idCardPhotos: [
            'https://picsum.photos/seed/id3/400/200',
            'https://picsum.photos/seed/id4/400/200'
          ]
        },
        {
          id: 'EMP003',
          name: '王五',
          gender: '男',
          idCard: '440101199511238901',
          photoUrl: 'https://picsum.photos/seed/emp3/100/100',
          entryDate: '2022-01-10',
          contractFile: '',
          idCardPhotos: [
            'https://picsum.photos/seed/id5/400/200'
          ]
        },
        {
          id: 'EMP004',
          name: '赵六',
          gender: '女',
          idCard: '110101199803152345',
          photoUrl: 'https://picsum.photos/seed/emp4/100/100',
          entryDate: '2023-05-08',
          contractFile: '/files/contracts/emp004.pdf',
          idCardPhotos: []
        }
      ],
      
      // 分页相关
      currentPage: 1,
      pageSize: 10,
  
      
      // 弹窗控制
      showDeleteConfirm: false,
      deleteId: ''
    };
  },
  computed: {
    // 筛选后的员工列表
    filteredStaffList() {
      let result = [...this.staffList];
      
      // 搜索筛选
      if (this.searchKey) {
        const key = this.searchKey.toLowerCase();
        result = result.filter(item => 
          item.id.toLowerCase().includes(key) ||
          item.name.toLowerCase().includes(key) ||
          item.idCard.includes(key)
        );
      }
      
      // 性别筛选
      if (this.genderIndex > 0) {
        const gender = this.genderOptions[this.genderIndex];
        result = result.filter(item => item.gender === gender);
      }
      
      // 计算总页数
  
      
      // 分页处理
      const start = (this.currentPage - 1) * this.pageSize;
      return result.slice(start, start + this.pageSize);
    },
	   totalPages() {
	      return Math.ceil(this.filteredStaffList.length / this.pageSize);
	    },
		   paginatedStaffList() {
		      const start = (this.currentPage - 1) * this.pageSize;
		      return this.filteredStaffList.slice(start, start + this.pageSize);
		    }
	
  },
  methods: {
    // 身份证号脱敏处理（显示前6位和后4位）
    maskIdCard(idCard) {
      if (!idCard) return '';
      return idCard.replace(/^(\d{6})(\d+)(\d{4})$/, '$1********$3');
    },
    
    // 搜索处理
    handleSearch() {
      this.currentPage = 1; // 重置到第一页
    },
    
    // 性别筛选变更
    onGenderChange(e) {
      this.genderIndex = e.detail.value;
      this.currentPage = 1; // 重置到第一页
    },
    
    // 重置筛选条件
    resetFilter() {
      this.searchKey = '';
      this.genderIndex = 0;
      this.currentPage = 1;
    },
    
    // 分页切换
    changePage(page) {
      if (page < 1 || page > this.totalPages) return;
      this.currentPage = page;
    },
    
    // 查看员工详情
    viewStaffDetail(staff) {
      uni.navigateTo({
        url: `/pages/staffDetail/staffDetail?id=${staff.id}`
      });
    },
    
    // 新增员工
    addStaff() {
      uni.navigateTo({
        url: '/pages/staffEdit/staffEdit'
      });
    },
    
    // 编辑员工
    editStaff(staff) {
      uni.navigateTo({
        url: `/pages/staffEdit/staffEdit?id=${staff.id}`
      });
    },
    
    // 删除员工（显示确认弹窗）
    deleteStaff(id, index) {
      this.deleteId = id;
      this.showDeleteConfirm = true;
    },
    
    // 确认删除
    confirmDelete() {
      this.staffList = this.staffList.filter(item => item.id !== this.deleteId);
      this.showDeleteConfirm = false;
      uni.showToast({ title: '删除成功', icon: 'success' });
    },
    
    // 预览员工照片
    previewImage(url) {
      uni.previewImage({
        urls: [url],
        current: url
      });
    },
    
    // 预览身份证照片
    previewIdCard(photos) {
      if (!photos || photos.length === 0) {
        uni.showToast({ title: '未上传身份证照片', icon: 'none' });
        return;
      }
      uni.previewImage({
        urls: photos,
        current: photos[0]
      });
    },
    
    // 下载合同文件
    downloadFile(filePath) {
      if (!filePath) {
        uni.showToast({ title: '未上传合同文件', icon: 'none' });
        return;
      }
      
      // 模拟文件下载
      uni.showLoading({ title: '文件下载中...' });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({ title: '文件已下载', icon: 'success' });
        // 实际项目中使用 uni.downloadFile 和 uni.openDocument
        /*
        uni.downloadFile({
          url: filePath,
          success: res => {
            if (res.statusCode === 200) {
              uni.openDocument({
                filePath: res.tempFilePath,
                showMenu: true
              });
            }
          }
        });
        */
      }, 1000);
    }
  }
};
</script>

<style scoped>
.staff-list-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
  width: 100%;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1px solid #eee;
}

/* 搜索与筛选区 */
.search-filter {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 8rpx;
  padding: 0 16rpx;
  height: 72rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.search-icon {
  color: #999;
  margin-right: 8rpx;
}

.search-input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
}

.filter-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16rpx;
  flex-wrap: wrap;
}

.gender-picker {
  flex: 1;
  min-width: 200rpx;
}

.picker-text {
  background-color: #fff;
  padding: 16rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.reset-btn {
  background-color: #fff;
  color: #666;
  border: 1px solid #eee;
  padding: 0 24rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.add-btn {
  background-color: #007aff;
  color: #fff;
  padding: 0 24rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  white-space: nowrap;
}

/* 员工列表 */
.staff-list {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.list-header {
  display: flex;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
  padding: 0 16rpx;
}

.header-item {
  padding: 20rpx 0;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-item {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 0 16rpx;
  align-items: center;
}

.staff-item:last-child {
  border-bottom: none;
}

.item-content {
  padding: 16rpx 0;
  font-size: 26rpx;
  color: #666;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 员工照片 */
.staff-photo {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  object-fit: cover;
}

/* 性别标签 */
.gender-tag {
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  color: #fff;
}

.gender-tag.male {
  background-color: #007aff;
}

.gender-tag.female {
  background-color: #ff4d6a;
}

/* 文件按钮 */
.file-btn {
  background-color: #f0f7ff;
  color: #007aff;
  border: 1px solid #e0efff;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  white-space: nowrap;
}

.file-btn:disabled {
  background-color: #f5f5f5;
  color: #ccc;
  border-color: #eee;
}

.idcard-btn {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #e6f7e0;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
}

.idcard-btn:disabled {
  background-color: #f5f5f5;
  color: #ccc;
  border-color: #eee;
}

/* 操作按钮 */
.operate-btns {
  display: flex;
  gap: 16rpx;
  justify-content: center;
}

.edit-icon {
  color: #007aff;
}

.delete-icon {
  color: #f56c6c;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-text {
  margin: 24rpx 0;
  font-size: 30rpx;
  color: #999;
}

.empty-add-btn {
  background-color: #007aff;
  color: #fff;
  padding: 12rpx 32rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}

/* 分页控件 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24rpx;
  padding: 32rpx 0;
}

.page-btn {
  background-color: #fff;
  color: #666;
  border: 1px solid #eee;
  padding: 0 24rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.page-btn:disabled {
  color: #ccc;
  background-color: #f5f5f5;
}

.page-info {
  font-size: 28rpx;
  color: #666;
}

/* 确认弹窗 */
.confirm-popup {
  width: 560rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
  text-align: center;
}

.popup-content {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 32rpx;
  line-height: 1.5;
}

.popup-btns {
  display: flex;
  gap: 24rpx;
}

.cancel-btn {
  flex: 1;
  background-color: #f5f5f5;
  color: #666;
  border-radius: 8rpx;
  font-size: 28rpx;
  padding: 16rpx 0;
}

.confirm-btn {
  flex: 1;
  background-color: #f56c6c;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  padding: 16rpx 0;
}
</style>